<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>矿用带式输送机监测系统关键零部件剩余寿命预测平台</title>

    <!-- unpkg -->
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

    <style>
        /* 为了使用图标，引入 Lucide 图标库样式 */
        @import url('https://unpkg.com/lucide@latest/dist/css/lucide.min.css');

        /* 为 ECharts 图表容器设置高度 */
        .chart-container {
            height: 300px;
        }
    </style>
</head>

<body>
    <!-- Vue挂载点 -->
    <div id="app">
        <el-container class="h-screen w-screen">
            <!-- 顶部导航栏 -->
            <!-- 修改后的 el-header -->
            <el-header class="text-white flex items-center justify-center shadow-lg ">
                <el-card class="bg-transparent w-full"
                    :body-style="{ display: 'flex', justifyContent: 'center', alignItems: 'center' }"
                    style="background-color: var(--el-color-primary)">
                    <span class=" font-bold whitespace-nowrap">
                        矿用带式输送机监测系统关键零部件剩余寿命预测平台
                    </span>
                </el-card>
            </el-header>

            <!-- 内容区域 -->
            <el-container>
                <!-- 左侧布局 -->
                <el-aside width="200px" class="bg-gray-100 p-2">
                    <el-menu default-active="fptMonitor" class="border-none bg-gray-200" style="margin-top: 20px;"
                        @select="handleSelect">
                        <el-menu-item index="operationParams">
                            <el-icon>
                                <i class="lucide lucide-setup"></i>
                            </el-icon>
                            运行参数
                        </el-menu-item>
                        <el-menu-item index="dataQuery">
                            <el-icon>
                                <i class="lucide lucide-search"></i>
                            </el-icon>
                            数据查询
                        </el-menu-item>
                        <el-sub-menu index="fptCheck">
                            <template #title>
                                <el-icon>
                                    <i class="lucide lucide-monitor"></i>
                                </el-icon>
                                FPT点检测
                            </template>
                            <el-menu-item index="fptCheckBasicInfo">
                                <el-icon>
                                    <!-- 可以更换为适合基础信息的图标 -->
                                    <i class="lucide lucide-info"></i>
                                </el-icon>
                                基础信息
                            </el-menu-item>
                            <el-menu-item index="fptCheckFaultDetection">
                                <el-icon>
                                    <!-- 可以更换为适合故障检测的图标 -->
                                    <i class="lucide lucide-alert-triangle"></i>
                                </el-icon>
                                故障检测
                            </el-menu-item>
                        </el-sub-menu>
                        <el-menu-item index="lifePrediction">
                            <el-icon>
                                <i class="lucide lucide-histogram"></i>
                            </el-icon>
                            剩余寿命预测
                        </el-menu-item>
                        <el-menu-item index="systemSettings">
                            <el-icon>
                                <i class="lucide lucide-setting"></i>
                            </el-icon>
                            系统设置
                        </el-menu-item>
                        <el-menu-item index="maintenanceReminder">
                            <el-icon>
                                <i class="lucide lucide-alert-triangle"></i>
                            </el-icon>
                            维护提醒
                        </el-menu-item>
                    </el-menu>
                </el-aside>

                <!-- 右侧布局 -->
                <el-main class="!p-0">
                    <!-- 功能模块1 -->
                    <el-row :gutter="20" class="mb-4">
                        <el-col :span="12">
                            <el-card class="h-full">
                                <template #header>
                                    <div class="card-header">
                                        <span class="text-lg font-semibold">环境参数</span>
                                    </div>
                                </template>

                                <!-- 带有斑马条纹的版本 -->
                                <el-table :data="envData" stripe style="width: 100%">
                                    <el-table-column prop="time" label="采集时间"><el-table-column />
                                        <el-table-column prop="co" label="CO浓度(PPM)">
                                            <!-- 若需要自定义单元格内容，可以在这里添加模板 -->
                                        </el-table-column>
                                        <el-table-column prop="so2" label="二氧化硫浓度(PPM)">
                                            <!-- 若需要自定义单元格内容，可以在这里添加模板 -->
                                        </el-table-column>
                                        <el-table-column prop="dust" label="粉尘浓度(PPM)">
                                            <!-- 若需要自定义单元格内容，可以在这里添加模板 -->
                                        </el-table-column>
                                        <el-table-column prop="sulfur" label="硫化率(PPM)">
                                            <!-- 若需要自定义单元格内容，可以在这里添加模板 -->
                                        </el-table-column>
                                </el-table>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card header="故障信息饼图">
                                <div ref="pieChart" class="chart-container"></div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20" class="mb-4">
                        <el-col :span="12">
                            <el-card class="h-full">
                                <template #header>
                                    <div class="card-header">
                                        <span class="text-lg font-semibold">运行参数</span>
                                    </div>
                                </template>

                                <el-table :data="runData" style="width: 100%">
                                    <el-table-column prop="name" label="设备名称">
                                        <!-- 若需要自定义单元格内容，可以在这里添加模板 -->
                                    </el-table-column>
                                    <el-table-column prop="id" label="设备编号">
                                        <!-- 若需要自定义单元格内容，可以在这里添加模板 -->
                                    </el-table-column>
                                    <el-table-column prop="time" label="运行时间">
                                        <!-- 若需要自定义单元格内容，可以在这里添加模板 -->
                                    </el-table-column>
                                    <el-table-column prop="speed" label="运行速度">
                                        <!-- 若需要自定义单元格内容，可以在这里添加模板 -->
                                    </el-table-column>
                                    <el-table-column prop="load" label="负载">
                                        <!-- 若需要自定义单元格内容，可以在这里添加模板 -->
                                    </el-table-column>
                                </el-table>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card class="h-full">
                                <template #header>
                                    <div class="card-header">
                                        <span class="text-lg font-semibold">生产进度</span>
                                    </div>
                                </template>

                                <div ref="progressChart" class="chart-container"></div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20" class="mb-4">
                        <el-col :span="12">
                            <el-card class="h-full">
                                <template #header>
                                    <div class="card-header">
                                        <span class="text-lg font-semibold">设备维护提醒</span>
                                    </div>
                                </template>
                                <el-table :data="maintenanceData" style="width: 100%">
                                    <el-table-column prop="deviceId" label="设备编号">
                                        <!-- 若需要自定义单元格内容，可以在这里添加模板 -->
                                    </el-table-column>
                                    <el-table-column prop="reminderTime" label="提醒时间">
                                        <!-- 若需要自定义单元格内容，可以在这里添加模板 -->
                                    </el-table-column>
                                    <el-table-column prop="content" label="提醒内容">
                                        <!-- 若需要自定义单元格内容，可以在这里添加模板 -->
                                    </el-table-column>
                                </el-table>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <!-- 可根据需求添加新的卡片 -->
                            可根据需求添加新的卡片
                            <el-table :data="tableData" stripe style="width: 100%">
                                <el-table-column prop="date" label="Date" width="180"> <el-table-column />
                                    <el-table-column prop="name" label="Name" width="180"><el-table-column />
                                        <el-table-column prop="address" label="Address"><el-table-column />
                            </el-table>
                        </el-col>
                    </el-row>

                    <el-card header="带式输送机健康状态" class="mt-4">
                        <el-space wrap>
                            <el-card v-for="item in healthStatus" :key="item.id" shadow="never">
                                <el-tag :type="item.status === '健康' ? 'success' : 'danger'">
                                    {{ item.status }}
                                </el-tag>
                                <div class="mt-2 text-sm">编号: {{ item.id }}</div>
                            </el-card>
                        </el-space>
                    </el-card>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <script>
        const { createApp, onMounted, ref } = Vue;
        const app = createApp({
            setup() {
                const testTableData = [
                    {
                        date: '2016-05-03',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-02',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-04',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-01',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                ];
                const envData = [
                    { time: '2024-04-01 10:00', co: 20, so2: 15, dust: 30, sulfur: 5 },
                    { time: '2024-04-01 14:00', co: 18, so2: 17, dust: 28, sulfur: 4 },
                    { time: '2024-04-01 18:00', co: 22, so2: 14, dust: 33, sulfur: 6 },
                    { time: '2024-04-02 08:00', co: 19, so2: 16, dust: 31, sulfur: 5 }
                ];

                const runData = [
                    { name: '输送机A', id: '001', time: '120h', speed: '2.5m/s', load: '80%' },
                    { name: '输送机B', id: '002', time: '95h', speed: '2.8m/s', load: '75%' },
                    { name: '输送机C', id: '003', time: '150h', speed: '2.3m/s', load: '85%' },
                    { name: '输送机D', id: '004', time: '200h', speed: '2.6m/s', load: '78%' }
                ];

                const healthStatus = [
                    { id: '001', status: '健康' },
                    { id: '002', status: '故障' },
                    { id: '003', status: '健康' },
                    { id: '004', status: '故障' },
                    { id: '005', status: '健康' },
                    { id: '006', status: '故障' }
                ];

                const maintenanceData = [
                    { deviceId: '001', reminderTime: '2025-03-22', content: '设备润滑维护' },
                    { deviceId: '002', reminderTime: '2025-03-23', content: '皮带更换' }
                ];

                const pieChart = ref(null);
                const progressChart = ref(null);

                onMounted(() => {
                    // 饼图初始化
                    const pie = echarts.init(pieChart.value);
                    pie.setOption({
                        tooltip: { trigger: 'item' },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [{
                            type: 'pie',
                            data: [
                                { value: 10, name: '故障个数' },
                                { value: 25, name: '正常个数' },
                                { value: 5, name: '维修个数' }
                            ]
                        }]
                    });

                    // 进度条图表
                    const progress = echarts.init(progressChart.value);
                    progress.setOption({
                        tooltip: { trigger: 'axis' },
                        xAxis: { type: 'value', max: 100 },
                        yAxis: { type: 'category', data: ['产线001', '产线002'] },
                        series: [{
                            type: 'bar',
                            data: [75, 90],
                            barWidth: 20,
                            itemStyle: { color: '#36a3eb' }
                        }]
                    });
                });

                const handleSelect = (key) => {
                    console.log('选中的菜单项：', key);
                };

                return {
                    envData,
                    runData,
                    healthStatus,
                    maintenanceData,
                    pieChart,
                    progressChart,
                    handleSelect
                };
            }
        });
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>

</html>